<!--
 * @Author: 谢陈洁
 * @Date: 2025-05-31 17:02:12
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-08-01 15:45:31
 * @Description: file content
-->
<template>
  <el-container class="layout-container">
    <layout-header :title="title" />
    <el-container>
      <el-aside class="layout-aside">
        <el-scrollbar class="sidebar-menu">
          <el-menu :default-active="activeIndex" :collapse="collapse" @select="handleSelect">
            <side-menu :menuList="menuList" />
          </el-menu>
        </el-scrollbar>
        <el-button
          class="collapse-btn"
          @click="handleCollapse"
          :icon="collapse ? 'arrow-right' : 'arrow-left'"
        ></el-button>
      </el-aside>
      <el-container>
        <el-header class="layout-main-header">
          <breadcrumb />
        </el-header>
        <el-main class="layout-main">
          <!-- <el-scrollbar class="content-scrollbar"> -->
          <router-view v-slot="{ Component }" class="router-view">
            <keep-alive>
              <transition name="fade" mode="out-in">
                <component v-if="Component" :is="Component" :key="route.path" />
              </transition>
            </keep-alive>
          </router-view>
          <!-- </el-scrollbar> -->
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/stores/userStore'
  import SideMenu from './side-menu/index.vue'
  import LayoutHeader from './layout-header/index.vue'
  import Breadcrumb from './layout-header/breadcrumb/index.vue'
  import { useRoute } from 'vue-router'
  import { storeToRefs } from 'pinia'
  import { constantRoutes } from '@/router/constantRoute'
  const title = import.meta.env.VITE_APP_TITLE
  const userStore = useUserStore()
  const { dynamicMenus } = storeToRefs(userStore)
  const menuList = computed(() => [...constantRoutes, ...dynamicMenus.value])
  const router = useRouter()
  const route = useRoute()
  const activeIndex = ref(route.path)
  const collapse = ref(false)
  const handleCollapse = () => {
    collapse.value = !collapse.value
  }

  const handleSelect = (index: string, indexPath: string[] = []) => {
    console.log('handleSelect', index, indexPath)
    activeIndex.value = index
    const routePath = indexPath.join('/')
    if (routePath && routePath !== route.path) {
      // 如果选中的菜单项的路径与当前路由不同，则进行路由跳转
      router.push(routePath)
    }
  }
</script>

<style scoped lang="scss">
  .layout-container {
    height: 100vh;
    display: block;
    overflow: hidden;
  }

  .layout-aside {
    background-color: $layout-sidebar-background;
    width: fit-content;
    display: flex;
    flex-direction: column;
    height: calc(100vh - $layout-header-height);
    .sidebar-menu {
      max-width: $layout-sidebar-width;
      flex: 1;
    }
    .collapse-btn {
      background-color: $layout-header-background;
      border-radius: 0;
      color: $layout-header-text-color;
      border: none;
    }
  }
  .layout-main-header {
    background-color: $layout-main-header-background;
    border-bottom: 1px solid #dcdfe6;
    height: 40px;
    display: flex;
    align-items: center;
  }
  .layout-main {
    /* padding: $layout-content-padding; */
    height: calc(100vh - $layout-header-height - 40px);
    overflow: hidden;
    .router-view {
      height: 100%;
    }
    .content-scrollbar {
      height: 100%;
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: all 0.3s ease;
    }
    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
      transform: translateY(-20px);
    }
    .fade-enter-to,
    .fade-leave-from {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>
